<template>
  <van-popup class="time-pop" v-model="showPicker" position="bottom" :close-on-click-overlay="false">
    <van-datetime-picker v-model="currentDate" type="date" :title='title' :min-date="minDate" :max-date="maxDate"
      @confirm="confirm" @cancel="cancel" confirm-button-text="确定">
      <template #columns-top>
        <p class="picker-tab">
          <span :class="index == '0' ? 'active' : ''" @click="checkIndex(0)">开始日期</span>
          <span :class="index == '1' ? 'active' : ''" @click="checkIndex(1)">结束日期</span>
        </p>
      </template>
    </van-datetime-picker>
  </van-popup>
</template>

<script>
import { Toast } from 'vant';

export default {
  props: {
    sTime: {
      type: String
    },
    eTime: {
      type: String
    },
    title: {
      type: String,
      default: '选择入职时间'
    }
  },
  data() {
    return {
      showPicker: false,
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      index: 0,
      start: new Date(2010, 0, 1),
      end: new Date()
    }
  },
  created() {
    this.show()
  },
  methods: {
    show() {
      this.index = 0
      let start = this.sTime ? this.sTime : this.start
      let end = this.eTime ? this.eTime : this.end
      this.start = this.$moment(new Date(start)).format('YYYYMMDD');
      this.end = this.$moment(new Date(end)).format('YYYYMMDD');
      this.currentDate = new Date(start)
    },
    showPop() {
      this.showPicker = true
    },
    checkIndex(index) {
      if (index == 1) {
        // this.maxDate = new Date()
        // this.minDate = this.start
        this.start = this.currentDate
        setTimeout(() => {
          this.currentDate = this.end
        }, 0);
      }
      if (index == 0) {
        // this.minDate = new Date(2010, 0, 1)
        // this.maxDate = this.end
        this.end = this.currentDate
        setTimeout(() => {
          this.currentDate = this.start
        }, 0);
      }
      this.index = index
    },
    confirm() {
      let message
      if (this.index == 0) {
        this.start = this.currentDate
        message = '开始日期不能小于结束日期'
      }
      if (this.index == 1) {
        this.end = this.currentDate
        message = '结束时间不能小于开始时间'
      }
      let start = this.$moment(new Date(this.start)).format('YYYYMMDD')
      let end = this.$moment(new Date(this.end)).format('YYYYMMDD')
      let days = this.$moment(start).diff(this.$moment(end), 'days')
      if (days > 0) {
        Toast(message)
        return
      }
      if (isNaN(new Date(this.start).getTime())) {
        // console.log('---1');
        message = '请选择有效的开始日期'
        Toast(message)
        return
      }
      if (isNaN(new Date(this.end).getTime())) {
        // console.log('----2');
        message = '请选择有效的结束日期'
        Toast(message)
        return
      }
      this.$emit('changeTime', {
        startTime: start,
        endTime: end
      })
      this.showPicker = false
    },
    cancel() {
      this.start = this.sTime
      this.end = this.eTime
      this.showPicker = false
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="less" scoped>
.picker-tab {
  margin: 20px 0;
  width: 80%;
  height: 72px;
  background: #F6F6F6;
  font-size: 26px;
  border-radius: 36px;
  color: #333333;
  margin-left: 10%;

  span {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 72px;
  }

  .active {
    background: #4575C9;
    border-radius: 36px;
    color: #FFFFFF;
  }
}


::v-deep .van-picker__title {
  color: rgba(0, 0, 0, 0.5);
  font-size: 14PX;
}

::v-deep .van-picker__cancel {
  color: #251717;
  font-size: 14PX;
}

::v-deep .van-picker__confirm {
  color: #397FF9;
  font-size: 14PX;
}
</style>